<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>求约墙详情</title>
  <link rel="stylesheet" type="text/css" href="../css/api.css" />
  <link rel="stylesheet" type="text/css" href="../css/dating.css" />
</head>

<body>
  <div id="app" v-cloak>
    <div class="wrap flex-wrap flex-vertical">
      <header id="header">
        <div class="header-wrap border-bottom">
          <div class="header-left" onclick="api.closeWin()">
            <i class="iconfont icon-pre"></i>
          </div>
          <div class="header-title">求约详情</div>
        </div>
      </header>
      <div class="flex-con">
        <div class="dating-details">
          <div class="member-wrap">
            <div class="member-avatar">
              <img :src="datingDetail.member.avatar" alt="">
            </div>
            <div class="member-info">
              <div class="name-wrap">
                <span class="name">{{datingDetail.member.name}}</span>
                <span :class="['sex', 'sex' + datingDetail.member.sex]"><i :class="['iconfont', 'icon-sex' + datingDetail.member.sex]"></i>{{datingDetail.member.age}}</span>
                <span class="time">{{datingDetail.updated_at}}</span>
              </div>
              <div class="city">{{datingDetail.member.city}}</div>
            </div>
          </div>
          <div class="dating-content">
            <div class="content-item">
              <div class="item-title">求约描述:</div>
              <div class="item-con">{{datingDetail.description}}</div>
            </div>
            <div class="content-item">
              <div class="item-title">约会地点:</div>
              <div class="item-con">{{datingDetail.place}}</div>
            </div>
            <div class="content-item">
              <div class="item-title">出发时间: </div>
              <div class="item-con">{{datingDetail.time | getFormatTime}}</div>
            </div>
            <div class="content-item">
              <div class="item-title">费用预算: </div>
              <div class="item-con">{{datingDetail.fee}}</div>
            </div>
            <div class="content-item">
              <div class="item-title">费用支付: </div>
              <div class="item-con">{{datingDetail.pay | getFormatPay}}</div>
            </div>
          </div>
          <div class="btn-wrap" v-if="showJoinBtn && !isExpire">
            <button class="date-btn" type="button" @click="join">我要约Ta</button>
          </div>
        </div>
        <div v-if="datingDetail.reply.length > 0" class="reply-list">
          <h2>应约列表</h2>
          <div v-for="(item, i) in datingDetail.reply" :key="item.member_id" class="reply-item border-bottom">
            <div class="avatar" @click="openDetail(item.member_id)">
              <img :src="item.member.avatar" alt="">
            </div>
            <div class="info-wrap" @click="openDetail(item.member_id)">
              <div class="name">{{item.member.name}}
                <span :class="['age' + item.member.sex]">
                  <i :class="['icon-sex' + item.member.sex, 'iconfont']"></i>{{item.member.age}}
                </span>
              </div>
              <div class="info">{{item.member.city}}</div>
            </div>
            <div v-if="!showJoinBtn && !isExpire" class="value">
              <i v-if="item.selected == '1'" class="iconfont icon-right-2"></i>
              <button v-if="item.selected == '0'" type="button" @click="appointmentFind(item.id)">选择Ta</button>
            </div>
            <i v-else class="iconfont icon-next" @click="openDetail(item.member_id)"></i>
          </div>
        </div>
        <div class="rule-wrap">
          <div class="rule-title">求约规则:</div>
          <div class="rule-content">
            <p>1、请绿色约拍、约会、约游，严禁涉黄、涉暴力与政治。.</p>
            <p>2、达成求约后请及时私聊求约事宜，并商量确定收取或赠送赴约担保礼物金额,最后确定拍摄、约会或旅游行程安排。若为AA制，则赴约担保礼物退回。</p>
            <p>3、新版一对多交友约友众多，切勿相信任何私下转账要求,避免上当受骗，避免财产损失。</p>
            <p>4、如遇到未赴约或者骗子，请及时举报投诉，我们将为您追回损失，并给予违约者处罚，给予你补偿。</p>
            <p>5、送礼物者违约，礼物归收礼物者所有。收礼物者违约，我们将为送礼物者追回礼物,并给予违约者所收礼物等价值的处罚,并将50%的处罚补偿给送礼物者。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
  var app;
  apiready = function () {
    $api.fixStatusBar($api.dom('#header'));
    app = new Vue({
      el: '#app',
      data: {
        datingDetail: {
          id: '',
          member_id: '',
          audio: '',
          type: '',
          fee: '',
          time: '',
          place: '',
          longitude: '',
          latitude: '',
          pay: '',
          requirement: '',
          description: '',
          created_at: '',
          updated_at: '',
          member: {
            member_id: '',
            avatar: '',
            name: '',
            city: '',
            sex: '',
            age: ''
          },
          reply: []
        },
        showJoinBtn: false,
        isExpire: false,
      },
      created: function () {
        this.getAppointmentDetail();
      },
      mounted: function () {},
      methods: {
        getAppointmentDetail: function () {
          var _this = this;
          api.showProgress({
            title: '',
            text: '加载中……'
          });
          api.ajax({
            url: baseUrl + 'appointment/detail',
            method: 'get',
            headers: {
              token: $api.getStorage('deviceToken')
            },
            data: {
              values: {
                uid: $api.getStorage('uid'),
                id: api.pageParam.id
              },
            }
          }, function (ret, err) {
            api.refreshHeaderLoadDone();
            api.hideProgress();
            if (ret.status == 200) {
              _this.datingDetail = ret.data;
              if ($api.getStorage('uid') != ret.data.member_id) {
                _this.showJoinBtn = true
              }
              var now = new Date();
              if (_this.datingDetail.time*1000 < now.getTime()) {
                _this.isExpire = true;
              } else {
                _this.isExpire = false;
              }
            }
          })
        },
        join: function () {
          var _this = this;
          api.showProgress({
            title: '',
            text: '正在约Ta……'
          });
          api.ajax({
            url: baseUrl + 'appointment/reply',
            method: 'post',
            headers: {
              token: $api.getStorage('deviceToken')
            },
            data: {
              values: {
                uid: $api.getStorage('uid'),
                id: api.pageParam.id
              },
            }
          }, function (ret, err) {
            api.hideProgress();
            if (ret) {
              api.toast({
                msg: ret.message[0]
              })
              if (ret.code == 200) {
                _this.getAppointmentDetail();
              }
            }
          })
        },
        appointmentFind: function (id) {
          var _this = this;
          api.showProgress({
            title: '',
            text: ''
          });
          api.ajax({
            url: baseUrl + 'appointment/find',
            method: 'post',
            headers: {
              token: $api.getStorage('deviceToken')
            },
            data: {
              values: {
                uid: $api.getStorage('uid'),
                id: id
              },
            }
          }, function (ret, err) {
            api.hideProgress();
            if (ret) {
              api.toast({
                msg: ret.message[0]
              })
              _this.getAppointmentDetail();
            }
          })
        },
        openDetail: function (id) {
          api.openWin({
            name: 'user_home',
            url: 'user_home.html',
            slidBackEnabled: false,
            pageParam: {
              member_id: id
            }
          });
        }
      },
      filters: {
        getFormatTime: function (value) {
          var date = new Date(value*1000);
          var y = date.getFullYear();
          var m = date.getMonth() + 1;
          m = m < 10 ? ('0' + m) : m; 
          var d = date.getDate();
          d = d < 10 ? ('0' + d) : d;
          return y + '-' + m + '-' + d;
        },
        getFormatPay: function (value) {
          if (value == '1') return '对方付';
          if (value == '0') return '我付';
          if (value == '2') return 'AA';
        },
      }
    })
  }
</script>